<template>
    <div style="margin-top: 10px">
            <template style="right: auto;left: auto;">
            <el-carousel :interval="4000" type="card" height="400px">
                <el-carousel-item v-for="(img,index) in imgList" :key="index">
                    <!--   这里要用到index是要保证他的唯一性-->
                    <img :src="img.url" style="height:400px;margin-left: 20px">
                </el-carousel-item>
            </el-carousel>
            </template>
            <div>
                <router-view></router-view>
            </div>
    </div>
</template>

<script>
    export default {
        name: "Frist",
        data(){
            return{
                imgList:[
                    {
                        url:require('./img/rousi.jpg')
                    },
                    {
                        url:require('./img/roupian.jpg')
                    },
                    {
                        url:require('./img/麻圆.jpg')
                    },
                    {
                        url:require('./img/水煮白菜.jpg')
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>